<template>
	<div class="white-list table-theme">
		<head-title title="信息--白名单"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="type" @roleType="stateType" v-if="admin_id == 1"></tabs-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
					<div class="add"><el-button type="primary" @click="addDialog = true">添加白名单</el-button></div>
					
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="whiteList">
				<el-table-column label="序号" align="center" prop="wilte_id"></el-table-column>
				<el-table-column label="用户序号	" align="center" prop="user_id"></el-table-column>
				<el-table-column label="用户名" align="center" prop="nickname"></el-table-column>
				<el-table-column label="用户头像" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.heard_img"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="电话" align="center" prop="phone"></el-table-column>
				<el-table-column label="类型" align="center" prop="type_name"></el-table-column>
				<el-table-column label="操作" align="center" width="180">
					<template slot-scope="scope">
						<el-button type="danger" size="mini" @click="operate(scope.row.wilte_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>

		<!-- 拒绝原因弹框 -->
		<el-dialog title="添加白名单" :close-on-click-modal="false" :visible.sync="addDialog" center :modal-append-to-body="false" width="680px">
			<el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="120px">
				<el-form-item label="用户ID:" prop="user_id"><el-input placeholder="请输入用户ID" v-model="addForm.user_id"></el-input></el-form-item>
				<el-form-item label="类型:" prop="type">
					<el-select v-model="addForm.type" placeholder="请选择">
						<el-option label="经销商白名单" value="1"></el-option>
						<el-option v-if="admin_id == 1" label="购物白名单" value="2"></el-option>
						<el-option label="裂变白名单" value="3"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmClick('addForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
import TabsView from '@/components/TabsView'
export default {
	components: {
		ImgPopover,
		TabsView
	},
	data() {
		return {
			admin_id: localStorage.getItem('admin_id'),
			addDialog: false,
			addForm: {
				user_id: '',
				type: '1'
			},
			addFormRules: {
				user_id: [{ required: true, message: '请输入用户ID' }],
				type: [{ required: true, message: '请选择类型' }]
			},
			whiteList: [], // 白名单列表
			total: 0,
			type: 0,
			page: 0,
			classifyList: ['全部' ,'经销商白名单', '购物白名单' ,'裂变白名单' ],
			searchOption: [
				{
					value: 0,
					label: "用户ID",
				}
			],
			classSelect: 0,
			selectContent: "",
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10
			};
			if (this.type != 0 && this.admin_id == 1) {
				// data.type 1成为经销商白名单 2购物白名单
				data.type = this.type;
			} else {
				data.type = 1;
			}

			// classSelect 1用户ID
			if (this.classSelect == 0 && this.selectContent != '') {
				data.user_id = this.selectContent;
			}

			this.$http(this.$ApiList.WhiteList, data).then(res => {
				this.whiteList = [];
				res.datas.data.forEach(item => {
					let type = ['', '经销商白名单', '购物白名单', '裂变白名单'];
					item.type_name = type[item.type];
					this.whiteList.push(item);
				});
				this.total = res.datas.count;
			});
		},
		stateType(type) {
			this.type = type;
			this.init();
		},
		operate(id) {
			let data = {
				white_id: id
			};
			this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http(this.$ApiList.WhiteDelete, data).then(res => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.page = 1;
						this.init();
					}
				});
			});
		},
		//提交
		confirmClick(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$http(this.$ApiList.WhiteAdd, this.addForm).then(res => {
						if (res.code == 200) {
							this.$layer.msg('操作成功');
							this.addDialog = false;
							this.init();
						}
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		// 搜素
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.init();
		},
		refreshPage() {
			this.page = 1;
			this.selectContent = '';
			this.type = 0;
			this.init();
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" scoped>
@media only screen and (max-width: 30em) {
	.white-list-top-menu{
		flex-wrap: wrap;
	}
	.white-list-menu-left{
		width: 100%;
	}
	.white-list-menu-right {
		margin-top: 20px;
		flex-wrap: wrap;
	}
	.search-view {
		margin-top: 20px;
	}
	.el-card__body {
		padding: 10px;
	}
	.el-dialog{
		width: 95%!important;
	}
}
</style>
